<template>
  <el-row>
    <el-row class="pading-20 my-border my-bg">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>测试计划管理</el-breadcrumb-item>
        <el-breadcrumb-item>计划维护</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <el-row>
      <div class="operate">
        <el-button size="small" type="primary" @click="add">新增</el-button>
        <el-input ref="queryProjectText" v-model="queryTaskText" size="small" placeholder="任务名称查询"
                  style="width: 150px;margin-left: 20px;margin-right: 10px"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="query">查询</el-button>
        <el-button size="small" type="primary" icon="el-icon-delete" @click="clear">清空</el-button>
        <el-tag style="margin-left: 50px">注：研发只能看到自己所属的项目，测试可以看到全局项目</el-tag>
      </div>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-table border :data="tableTestPlanData" style="width: 100%">
        <el-table-column fixed="left" align="center" label="序号" width="100">
          <template slot-scope="{$index}">
            <span>{{ (currentPage - 1) * pageSize + $index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column v-for="(item,key) in tableTestPlanTitle" :key="key" :prop="item.prop" align="center"
                         :label="item.label" :min-width="item.width">
          <template slot-scope="{row,$index}">
            <div v-if="editable[$index]">
              <el-date-picker v-if="item.prop=='startTime' || item.prop=='endTime' "  v-model="row[item.prop]"
                              format="yyyy 年 MM 月 dd 日"   value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
              <el-input v-else  v-model="row[item.prop]"></el-input>
            </div>
            <div v-else>
              <span v-if="item.prop=='jira'" class="jiraClass"
                    @click="openJira(row[item.prop])">{{ row[item.prop] }}</span>
              <span v-else>{{ row[item.prop] }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" align="center" label="操作" width="300">
          <template slot-scope="{row,$index}">
            <vxe-button v-per="'plan_edit'" type="text" status="success" icon="fa el-icon-edit" @click="editRow($index)">编辑</vxe-button>
            <vxe-button v-per="'plan_save'" type="text" status="primary" icon="fa el-icon-check" @click="saveRow(row,$index)">保存
            </vxe-button>
            <vxe-button v-per="'plan_mind'" type="text" status="primary" icon="fa el-icon-s-opportunity" @click="openEditor(row.id,row.planName)">脑图用例
            </vxe-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top:30px;float: left"
                     background
                     layout="prev, pager, next"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :page-count="pageCount">
      </el-pagination>
    </el-row>

    <el-dialog :visible.sync="dialogVisible" :fullscreen="true" :width="dialogWidth" :height="dialogHeight">
      <div class="main-container" style="height:450px;positions:relative;">
        <my-editer v-if="dialogVisible" :importJson="importJson" @saveData="saveData"
                   @closeDialog="closeDialog"></my-editer>
      </div>
    </el-dialog>

  </el-row>
</template>

<script>

import templateData from "../../../static/templateData"
import MyEditer from "../editor/MyEditer";
import {generateMixed} from "../../utils";
import {post} from "../../../src/utils/httpUtils.js"


export default {
  name: "planManagement",
  components: {MyEditer},

  data() {
    return {
      currentPage: 1,
      pageSize: 6,
      pageCount: 0,
      tableTestPlanTitle: templateData.tableTestPlanTitle,
      tableTestPlanData: [],
      queryTaskText: "",
      dialogVisible: false,
      dialogWidth: "90%",
      dialogHeight: "600px",
      editable: [],
      time:'',
      importJson: {
        template: "right",
        theme: "fresh-blue",
        data: {
          id: generateMixed(12),
          text: "默认根节点",
        },
        children: []
      },
      taskId: 0
    }
  },
  methods: {
    handleSizeChange(size) {
      this.currentPage = 1;//每次改变每页多少条都会重置当前页码为1
      this.pageSize = size;
      this.getData(this.currentPage, this.pageSize, this.queryTaskText)
    },
    handleCurrentChange(size) {
      this.currentPage = size;
      this.getData(this.currentPage, this.pageSize, this.queryTaskText)
    },


    editRow(index) {
      this.editable[index] = true;
      this.$set(this.editable, index, true);
    },

    saveRow(row, index) {
      if(row.planName==''){
        this.$message({message: "任务名称不能为空", type: 'error'});
        return;
      }
      if(row.tester==''){
        this.$message({message: "测试人员不能为空", type: 'error'});
        return;
      }
      if(row.developer==''){
        this.$message({message: "开发人员不能为空", type: 'error'});
        return;
      }
      if(row.startTime==''){
        this.$message({message: "计划测试开始时间不能为空", type: 'error'});
        return;
      }
      if(row.endTime==''){
        this.$message({message: "计划测试结束时间不能为空", type: 'error'});
        return;
      }
      row.operater=localStorage.getItem('nick_name')
      this.editable[index] = false;
      this.$set(this.editable, index, false);
      post('/api/plan/edit', JSON.stringify(row)).then((response) => {
        this.getData(1, this.pageSize, this.queryTaskText);
        this.$message({message: '操作成功', type: 'success'});
      })
    },

    openEditor(id,task) {
      let map = {}, pageObject = {}
      map['id'] = id;
      map['task'] = task;
      pageObject['data'] = map
      post('/api/plan/queryMindCase', JSON.stringify(pageObject)).then((response) => {
        this.dialogVisible = true;
        this.taskId = id;
        this.importJson = response.data
      })
    },


    saveData(data) {
      let map = {}, pageObject = {}
      map['task'] = this.taskId;
      map['data'] = data;
      pageObject['data'] = map
      post('/api/plan/saveMindCase', JSON.stringify(pageObject)).then((response) => {
        if (response.data=='200'){
          this.$message({message: '保存成功', type: 'success'});
        }else{
          this.$message({message: response.data, type: 'error'});
        }
      })
    },

    closeDialog() {
      this.dialogVisible = false
    },

    openJira(jira) {
      window.open(jira)
    },

    getData(currPage, pageSize, queryTaskText) {
    let pageObject={}
      pageObject['offset']=currPage
      pageObject['limit']=pageSize
      pageObject['data']=queryTaskText
      post('/api/plan/queryAll', JSON.stringify(pageObject)).then((response) => {
        this.tableTestPlanData = response.data.rows;
        this.pageCount = Math.ceil(response.data.total / this.pageSize);
      })
    },
    query() {
      this.getData(1, this.pageSize, this.queryTaskText)
    },
    clear() {
      this.queryTaskText = "";
      this.getData(1, this.pageSize, "")
    },

    add() {
      this.tableTestPlanData.unshift(templateData.tableTestPlanInit)
      this.editable[0] = true;
      this.$set(this.editable, 0, true);
    }

  },
  mounted() {
    this.getData(1, this.pageSize, "");
  }
}

</script>

<style scoped>
.my-border {
  border-radius: 3px;
  border: 1px solid #ebebeb;
}


html, body {
  background-color: #fafafa;
}

.my-bg {
  background-color: #fff
}

.pading-20 {
  padding: 20px;
}

.operate {
  float: left;
  margin-left: 20px;
  margin-top: 30px;
}

.jiraClass {
  color: #409eff;
  cursor: pointer;
}

</style>
